<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            display: none;
        }
    </style>
</head>

<body>

    <button id="a" class="b" style="color: red;">1</button>
    <button id="b" class="b">2</button>
    <button id="c" class="b">3</button>

    <p class="p" style="display: block;">1</p>
    <p class="p">2</p>
    <p class="p">3</p>

    <script>

        // 
        // var oBtn1 = document.getElementById('a') ;
        // var oBtn2 = document.getElementById('b') ;
        // var oBtn3 = document.getElementById('c') ;

        // var arr = [oBtn1 , oBtn2 , oBtn3] ;   // 真数组


        var arr = document.getElementsByClassName('b');   // 伪数组   HTMLCollection
        console.log(arr);

        var oPs = document.getElementsByClassName('p');


        // for(var i = 0 ; i < arr.length ; i++) {

        //     // 给每个按钮一个自定义属性  存下标
        //     arr[i].index = i ;


        //     arr[i].onclick = function() {
        //         // console.log(i);   // 3   异步    循环绑定完事件以后  i的使命就完成了

        //         // 清除所有的颜色
        //         for(var i = 0 ; i < arr.length ; i++) {
        //             arr[i].style.color = 'black' ;
        //         }
        //         // 给当前的按钮添加颜色
        //         this.style.color = 'red' ;



        //         // 关闭所有的p
        //         for(var i = 0 ; i < oPs.length ; i++) {
        //             oPs[i].style.display = 'none';
        //         }

        //         // 找到当前这个按钮对应的下标
        //         var j = this.index ;
        //         // 显示当前的p
        //         oPs[j].style.display = 'block' ;

        //     }
        // }









        for (var i = 0; i < arr.length; i++) {

            // 给每个按钮一个自定义属性  存下标
            arr[i].index = i;

            arr[i].onclick = function () {
                // console.log(i);   // 3   异步    循环绑定完事件以后  i的使命就完成了

                // 清除所有的颜色
                for (var i = 0; i < arr.length; i++) {
                    // 清除所有的颜色
                    arr[i].style.color = 'black';
                    // 清除所有的p
                    oPs[i].style.display = 'none';
                }

                
                // 给当前的按钮添加颜色
                this.style.color = 'red';

                // 找到当前这个按钮对应的下标
                var j = this.index;
                // 显示当前的p
                oPs[j].style.display = 'block';

            }
        }

    </script>

</body>

</html>